import React, { Component } from 'react'
import "./Twolistbar.scss"
import { Swiper } from 'antd-mobile'
export default class Twolistbar extends Component {
    constructor(props) {
        super(props)

    }

    render() {

        const colors = this.props.billboards

        const items = colors.map((color, index) => (
            <Swiper.Item key={index}>
                <div>
                    <img src={color.pic} alt="" />

                </div>
            </Swiper.Item>
        ))

        return (
            <>
                {/* {
                    
                    this.props.billboards.map((v, i) => {
                        return ( */}
                <div className='billboards'>
                    {/* <img src={v.pic} alt="" /> */}
                    <Swiper autoplay loop="true">{items}</Swiper>
                </div>
                {/* )
                    })
                } */}
                {
                    this.props.subcategory.map((val, index) => {
                        return (
                            <div className='subcategory'>
                                <h3>{val.name}</h3>
                                <div className='subNavs'>
                                    {
                                        val.subNavs.map((val, index) => {
                                            return (

                                                <div className='item'>
                                                    <img src={val.pic} alt="" />
                                                    <div className='name'>{val.name}</div>
                                                </div>

                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    })
                }

            </>
        )
    }
}
